<template>
    <basic-container>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="银联基础" name="A">
                <div>
                    <h5>温馨提示：</h5>
                    <p>银联开放平台：<el-link href="https://open.unionpay.com/tjweb/index" target="_blank">https://open.unionpay.com/tjweb/index</el-link></p>
                    <p>银联自助入网测试：<el-link href="ttps://open.unionpay.com/tjweb/support/doc/online/7" target="_blank">ttps://open.unionpay.com/tjweb/support/doc/online/7</el-link></p>
                    <p>在线网关支付：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448</el-link></p>
                    <p>手机网页支付（WAP支付）：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453x" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objA" :option="optionA"  @submit="submitA">
                    </avue-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="网站应用" name="B">
                <div>
                    <h5>温馨提示：</h5>
                    <p>银联开放平台：<el-link href="https://open.unionpay.com/tjweb/index" target="_blank">https://open.unionpay.com/tjweb/index</el-link></p>
                    <p>银联自助入网测试：<el-link href="ttps://open.unionpay.com/tjweb/support/doc/online/7" target="_blank">ttps://open.unionpay.com/tjweb/support/doc/online/7</el-link></p>
                    <p>在线网关支付：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448</el-link></p>
                    <p>手机网页支付（WAP支付）：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453x" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objB" :option="optionB"  @submit="submitB">
                    </avue-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="移动应用" name="C">
                <div>
                    <h5>温馨提示：</h5>
                    <p>银联开放平台：<el-link href="https://open.unionpay.com/tjweb/index" target="_blank">https://open.unionpay.com/tjweb/index</el-link></p>
                    <p>银联自助入网测试：<el-link href="ttps://open.unionpay.com/tjweb/support/doc/online/7" target="_blank">ttps://open.unionpay.com/tjweb/support/doc/online/7</el-link></p>
                    <p>在线网关支付：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448</el-link></p>
                    <p>手机网页支付（WAP支付）：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453x" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objC" :option="optionC"  @submit="submitC">
                    </avue-form>
                </div>
            </el-tab-pane>
            <el-tab-pane label="回调地址" name="D">
                <div>
                    <h5>温馨提示：</h5>
                    <p>银联开放平台：<el-link href="https://open.unionpay.com/tjweb/index" target="_blank">https://open.unionpay.com/tjweb/index</el-link></p>
                    <p>银联自助入网测试：<el-link href="ttps://open.unionpay.com/tjweb/support/doc/online/7" target="_blank">ttps://open.unionpay.com/tjweb/support/doc/online/7</el-link></p>
                    <p>在线网关支付：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=448</el-link></p>
                    <p>手机网页支付（WAP支付）：<el-link href="https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453x" target="_blank">https://open.unionpay.com/tjweb/api/dictionary?apiSvcId=453</el-link></p>
                </div>
                <div style="width:50%;margin-top: 10px;">
                    <avue-form ref="form" v-model="objD" :option="optionD"  @submit="submitD">
                    </avue-form>
                </div>
            </el-tab-pane>
        </el-tabs>
    </basic-container>
</template>

<script>
   import {
       getUnionPay,
       setUnionPay
   } from "../../api/base/sysSet/unionPaySet";

   export default {
        data() {
            return {
                activeName: 'A',
                objA:{},
                objB:{},
                objC:{},
                objD:{},
                optionA:{
                    emptyBtn:false,
                    labelWidth:'200',
                    labelPosition:'left',
                    column: [{
                        label: "商户号",
                        prop: "unionPayMchId",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入商户号",
                            trigger: "blur"
                        }]
                    },{
                        label: "签名证书密码",
                        prop: "unionPaySignCertPwd",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入签名证书密码",
                            trigger: "blur"
                        }]
                    },{
                        label: "签名证书路径",
                        prop: "unionPaySignCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入验签证书路径",
                            trigger: "blur"
                        }]
                    },{
                        label: "敏感信息加密证书路径",
                        prop: "unionPayEncryptCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入敏感信息加密证书路径",
                            trigger: "blur"
                        }]
                    },{
                        label: "验签中级证书路径",
                        prop: "unionPayMiddleCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入验签中级证书路径",
                            trigger: "blur"
                        }]
                    },{
                        label: "验签根证书路径",
                        prop: "unionPayRootCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入验签根证书路径",
                            trigger: "blur"
                        }]
                    },{
                        label: "验签证书路径",
                        prop: "unionPayVerifyCertPath",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入验签证书路径",
                            trigger: "blur"
                        }]
                    }]
                    },
                optionB:{
                    emptyBtn:false,
                    labelWidth:'140',
                    labelPosition:'left',
                    column: [{
                        label: "PC前台通知地址",
                        tip:'支付成功后的页面 点击“返回商户”按钮跳转的地址',
                        prop: "unionPayPcFrontNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入PC前台通知地址",
                            trigger: "blur"
                        }]
                    }]
                },
                optionC:{
                    emptyBtn:false,
                    labelWidth:'140',
                    labelPosition:'left',
                    column: [{
                        label: "H5前台通知地址",
                        tip:'支付成功后的页面 点击“返回商户”按钮跳转的地址',
                        prop: "unionPayH5FrontNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入H5前台通知地址",
                            trigger: "blur"
                        }]
                    }]
                },
                optionD:{
                    emptyBtn:false,
                    labelWidth:'120',
                    labelPosition:'left',
                    column: [{
                        label: "支付回调地址",
                        prop: "unionPayNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入回调地址",
                            trigger: "blur"
                        }]
                    },{
                        label: "退款回调地址",
                        prop: "unionPayRefundNotifyUrl",
                        span: 24,
                        rules: [{
                            required: true,
                            message: "请输入退款回调地址",
                            trigger: "blur"
                        }]
                    }]
                },

            }
        },
        //页面初始化
        created(){
           this.getData()
        },
        methods: {
            getData(){
                getUnionPay().then(res=>{
                    console.log(res)
                    if(res.data.code==200){
                        let obj=res.data.data
                        // 基础
                        this.objA.unionPayMchId=obj.unionPayMchId
                        this.objA.unionPaySignCertPwd=obj.unionPaySignCertPwd
                        this.objA.unionPaySignCertPath=obj.unionPaySignCertPath
                        this.objA.unionPayEncryptCertPath=obj.unionPayEncryptCertPath
                        this.objA.unionPayMiddleCertPath=obj.unionPayMiddleCertPath
                        this.objA.unionPayRootCertPath=obj.unionPayRootCertPath
                        this.objA.unionPayVerifyCertPath=obj.unionPayVerifyCertPath
                        // PC
                        this.objB.unionPayPcFrontNotifyUrl=obj.unionPayPcFrontNotifyUrl
                        // h5
                        this.objC.unionPayH5FrontNotifyUrl=obj.unionPayH5FrontNotifyUrl
                        //回调地址
                        this.objD.unionPayNotifyUrl=obj.unionPayNotifyUrl
                        this.objD.unionPayRefundNotifyUrl=obj.unionPayRefundNotifyUrl
                    }
                })

            },
            handleClick(tab, event) {
                console.log(tab, event);
            },
            submitA (form,done) {
                setUnionPay(this.objA).then(res=>{
                    done()
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='A'
                    this.getData()
                })
            },
            submitB (form,done) {
                setUnionPay(this.objB).then(res=>{
                    done();
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='B'
                    this.getData()
                })
            },
            submitC (form,done) {
                setUnionPay(this.objC).then(res=>{
                    done();
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='C'
                    this.getData()
                })
            },
            submitD (form,done) {
                setUnionPay(this.objD).then(res=>{
                    done();
                    this.$message({
                        message:'提交成功',
                        type:'success'
                    })
                    this.activeName='D'
                    this.getData()
                })
            },
        }
    };
</script>
<style>
    h5{
        color: darkred;
        font-weight: bold;
    }
    p{
        line-height: 30px;
    }

</style>